const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',

    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    }, 
    
    module: {
        rules: [
            // less loader
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, 
            // 图片 loader
            {
                test: /\.(jpg|png|git)$/,
                // 需要下载 url-loader file-loader
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
                    // 解析时会出问题：[object Module]
                    // 解决方法：关闭 url-loader 的 es6 模块化，使用 commonjs
                    esModule: false, // 好像没有作用
                    // 给图片重新命名
                    // [hash:10]: 取图片的 hash 前10位
                    // [ext]: 取文件原来扩展名
                    name: '[hash:10].[ext]'
                }
            },
            // html 图片 的 laoder 补充
            {
                test: /\.html$/,
                // 处理 html 文件的 img 图片（负责引入 img, 从而能被 url-loader ）
                loader: 'html-loader'
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ], 

    mode: 'development'
}